<style include="cr-shared-style shimless-rma-shared">
  .large-icon {
    height: 200px;
    width: 300px;
  }

  #navigationButtonWrapper {
    bottom: var(--header-footer-height);
    position: absolute;
  }

  #rebootButton {
    margin-inline-end: 8px;
  }
</style>
<base-page>
  <div slot="left-pane">
    <h1 tabindex="-1">[[i18n('criticalErrorTitleText')]]</h1>
    <div class="icon-message">
      <iron-icon icon="shimless-icon:warning" class="warning-icon small-icon">
      </iron-icon>
      <div class="instructions">[[i18n('criticalErrorMessageText')]]</div>
    </div>
    <div id="writeProtectStatus">[[statusString_]]</div>
    <div id="navigationButtonWrapper">
      <cr-button id="rebootButton" class="action-button"
          on-click="onRebootButtonClicked_" disabled="[[allButtonsDisabled]]">
        [[i18n('criticalErrorRebootText')]]
      </cr-button>
      <cr-button id="exitToLoginButton"
          on-click="onExitToLoginButtonClicked_"
          disabled="[[allButtonsDisabled]]">
        [[i18n('criticalErrorExitText')]]
      </cr-button>
    </div>
  </div>
  <div slot="right-pane">
    <div class="illustration-wrapper" aria-hidden="true">
      <img class="illustration" src="illustrations/error.svg"
          alt="[[i18n('errorAltText')]]">
    </div>
  </div>
</base-page>
